<template>
    <div>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick(activeName)">
            <el-tab-pane label="机械" name="first">
                <div class="search_form">
                    <div>
                        <el-cascader size="mini" clearable placeholder="部门" :options="companyTree" :props="optionProps" change-on-select ref="cascaderEdit" @change="casChange1(deptId,false)" v-model="deptId" filterable style="width:200px"></el-cascader>
                        <el-input

                                size="mini"
                                style="width:150px;margin-left: 20px"
                                v-model="searchForm.equipment_no"
                                placeholder="机械编号"
                                clearable
                        ></el-input>

                        <el-select size="mini" style="width:150px" clearable ref="selectLabel" v-model="searchForm.status" placeholder="状态" >
                            <el-option
                                    v-for="item in options_status"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>

                        <el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="searchData">查询</el-button>

                    </div>

                </div>
                <!-- 主列表table -->
                <BaseTable
                        :data="tableData"
                        :columns="columns"
                        :tableHeight="tableHeight"
                        :pagination="false"
                        :loading="loading"
                ></BaseTable>
                <div class="page">
                    <el-pagination
                            background
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="queryall.startpage"
                            :page-sizes="[10, 15, 20, 25, 30]"
                            :page-size="queryall.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryall.totalNum"
                    ></el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="人工" name="second">
                <div class="container">

                    <div class="selectBox1">
                        <div >
                            <span style="width:1rem"></span>


                            <el-button size="mini" icon="el-icon-plus" @click="showshift" type="primary"
                                       v-hasPermi="['machineManagement:insertShift']">新增
                            </el-button>


                        </div>
                        <div>
                            <el-form ref="searchRgForm" size="mini" :model="searchRgForm" inline>

                                <el-form-item label>
                                    <el-date-picker
                                            v-model="searchRgForm.workDate"
                                            size="mini"
                                            value-format="yyyy-MM-dd"
                                            type="date"
                                            placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>

                                <el-form-item>
                                    <el-select size="mini" style="width:150px" clearable ref="selectLabel2" v-model="searchRgForm.workTime" placeholder="班次" >
                                        <el-option
                                                v-for="item in options_shift"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>


                                <el-form-item>
                                    <el-button class="search_btn" type="primary" icon="el-icon-search" size="mini"
                                               @click="queryArtificial">查询
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </div>
                </div>

                <!-- 主列表table -->
                <BaseTable
                        :data="rGtableData"
                        :columns="columns_shift"
                        :tableHeight="tableHeight"
                        :pagination="false"
                        :loading="loading"
                ></BaseTable>
                <div class="page">
                    <el-pagination
                            background
                            @size-change="handleSizeShiftChange"
                            @current-change="handleCurrentShiftChange"
                            :current-page="queryallShift.startpage"
                            :page-sizes="[10, 15, 20, 25, 30]"
                            :page-size="queryallShift.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="queryallShift.totalNum"
                    ></el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>

        <!-- 修改设备状态 -->
        <el-drawer :before-close="handleClose" title="修改设备状态" :visible.sync="editleixMod">
            <el-form ref="editTypeData" size="small" :model="nowData" style="padding:10px 20px">

                <el-form-item
                        prop="status"
                        :rules="[{ required: true, message: '状态不能为空' }]"
                        label="状态"
                        :label-width="formLabelWidth"
                >
                    <el-select ref="selectLabel" v-model="nowData.status" placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in options_status"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="备注"  required :label-width="formLabelWidth"  prop="remark">
                   <el-input  v-model="nowData.remark"  type="textarea" :rows="2" clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button size="small" type="primary" @click="editTypeList()">保 存</el-button>
            </div>
        </el-drawer>

        <!--  新增出勤-->
        <el-drawer :before-close="handleClose" title="新增出勤" :visible.sync="editleixModShift">
            <el-form ref="insertShiftData" size="small" :model="shiftData" style="padding:10px 20px">
                <el-form-item label="日期"   :rules="[{ required: true, message: '请选择日期' }]" :label-width="formLabelWidth"  prop="workDate">
                    <el-date-picker
                            v-model="shiftData.workDate"
                            type="date"
                            size="small"
                            style="width: 100%"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item
                        prop="workTime"
                        :rules="[{ required: true, message: '班次不能为空' }]"
                        label="班次"
                        :label-width="formLabelWidth"
                >
                    <el-select ref="selectLabel" v-model="shiftData.workTime" placeholder="请选择" style="width: 100%">
                        <el-option
                                v-for="item in options_shift"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item  label="出勤人数" :rules="[{ required: true, message: '出勤人数不能为空' }]" :label-width="formLabelWidth"  prop="num">
                    <el-input  v-model="shiftData.num"  clearable></el-input>
                </el-form-item>
            </el-form>
            <div class="demo-drawer__footer">
                <el-button size="small" type="primary" @click="saveShift()">保 存</el-button>
            </div>
        </el-drawer>
    </div>
</template>
<script>
    import BaseTableCheck from '@/components/BaseTable/baseTablecheck'
    import BaseTable from '@/components/BaseTable'
    import publicapi from '@/api/public/index'
    import api from '@/api/Dispatch/operationPlan/index'

    export default {
        components: {BaseTable, BaseTableCheck},
        data() {
            return {
                //查询条件
                searchForm: {
                    unit_id: '',
                    company: '',
                    status:'',
                    equipment_no:'',
                },
                //人工查询条件
                searchRgForm:{
                    workDate:'',
                    workTime:''
                },
                editleixMod:false,
                editleixModShift:false,
                nowData:{
                    id:'',
                    status:'',
                    remark:''

                },
                shiftData:{
                    workTime:'',
                    workDate:'',
                    num:''
                },
                workTimeList: [], // 班次
                menuArr: [],
                options_status:[
                    {
                        value: '0',
                        label: '正常'
                    },
                    {
                        value: '1',
                        label: '故障'
                    },
                    {
                        value: '2',
                        label: '维修'
                    },
                    {
                        value: '3',
                        label: '保养'
                    },
                ],
                options_shift:[
                    {
                        value: '01',
                        label: '白班'
                    },
                    {
                        value: '02',
                        label: '夜班'
                    }
                ],
                activeName: 'first', // tab选择页
                loading: false, // 主列表loading
                formLabelWidth: '120px', // form的item宽度
                // 主列表data
                tableData: [],
                rGtableData: [],
                rGcolumns: [],
                companyTree: [],
                optionProps: {
                    value: 'id',
                    label: 'name',
                    children: 'children'
                },
                deptId:'',
                // 主列表列
                columns: [
                    {
                        prop: 'unit_name',
                        label: '部门'
                    },
                    {
                        prop: 'equipment_type_name',
                        label: '机械类型'
                    },
                    {
                        prop: 'equipment_no',
                        label: '机械编号'
                    },
                    {
                        prop: 'statusWz',
                        label: '状态'
                    },
                    {
                        prop: 'remark',
                        label: '备注'
                    },
                    {
                        prop: 'createName',
                        label: '操作人'
                    },
                    {
                        prop: 'createTime',
                        label: '操作时间'
                    },
                    {
                        label: '操作',
                        fixed: 'right',
                        align: 'center',
                        width: 300,
                        render: (h, params) => {
                            return h(
                                'div',
                                {
                                    calss: 'btnClass'
                                },
                                [
                                    h('el-button', {
                                        props: {
                                            size: 'mini',
                                            disabled: params.row.delFlag == '1' ? true : false
                                        },
                                        style: {
                                            marginRight: '10px'
                                        },
                                        domProps: {
                                            // 添加标签,使用自己引入的iconfont图标
                                            innerHTML: `<span style='color:#0B6CD6;'><i class='iconfont icon-1-07'></i><span  style='padding-left:5px;'>编辑</span></span>`
                                        },
                                        on: {
                                            click: () => {
                                                click: this.handleEdit(params.$index, params.row)
                                            }
                                        }
                                    })

                                ]
                            )
                        }
                    }
                ],
                //人工出勤列表
                columns_shift: [
                    {
                        prop: 'deptName',
                        label: '部门'
                    },
                    {
                        prop: 'workDate',
                        label: '日期'
                    },
                    {
                        prop: 'workTime',
                        label: '班次',
                        render(h, params) {
                            if (params.row.workTime == '01') {
                                return h('span', {
                                    props: {
                                        size: 'mini'
                                    },
                                    domProps: {
                                        innerHTML: '白班'
                                    }
                                })
                            } else if (params.row.workTime == '02') {
                                return h('span', {
                                    props: {
                                        size: 'mini',
                                        type: 'warning'
                                    },
                                    domProps: {
                                        innerHTML: '夜班'
                                    }
                                })
                            }
                        }
                    },

                    {
                        prop: 'num',
                        label: '出勤人数'
                    },
                    {
                        prop: 'createName',
                        label: '操作人'
                    },
                    {
                        prop: 'createTime',
                        label: '操作时间'
                    },
                ],
                tableHeight: window.innerHeight - 250,
                // 页码
                queryall: {
                    totalNum: 0,
                    startpage: 1,
                    pagesize: 10
                },
                queryallShift: {
                    totalNum: 0,
                    startpage: 1,
                    pagesize: 10
                },
                portIndex: -1, // 集疏港选中的下标
                openPortTableData: [], // 集疏港data
                openPortselect: [], // 选中的集疏港计划复选框

            }
        },

        created() {
            //  日期默认当天
            let date = new Date()
            let theYear = date.getFullYear() //获取完整的年份(4位)
            let theMonth = date.getMonth() + 1 //获取当前月份(1-12,1代表1月)
            theMonth = theMonth >= 10 ? theMonth : "0" + theMonth
            let theDay = date.getDate() //获取当前日(1-31)
            theDay = theDay >= 10 ? theDay : "0" + theDay

            this.shiftData.workDate = theYear + '-' + theMonth + '-' + theDay
            this.getcompTree()
        },
        methods: {
            showshift(){
                this.editleixModShift = true
            },
            // 时间转换函数
            formatTime(row, column) {
                let dtime = new Date(row)
                const year = dtime.getFullYear()
                let month = dtime.getMonth() + 1
                if (month < 10) {
                    month = "0" + month
                }
                let day = dtime.getDate()
                if (day < 10) {
                    day = "0" + day
                }
                let hour = dtime.getHours()
                if (hour < 10) {
                    hour = "0" + hour
                }
                let minute = dtime.getMinutes()
                if (minute < 10) {
                    minute = "0" + minute
                }
                let second = dtime.getSeconds()
                if (second < 10) {
                    second = "0" + second
                }
                return year + "-" + month + "-" + day
            },

            // 修改字典类型弹出
            async handleEdit(index, row) {
                this.nowData.id = row.id
                if (!this.editleixMod) {
                    this.editleixMod = true
                }
            },
            // 获取公司🌲
            async getcompTree() {
                const res = await this.$http.get(
                    `/${this.$ServiceName}/api/external/publics/listcomdept`
                )
                if (res.data.code != '0000') {
                    return this.$message.error(res.data.msg)
                }
                this.companyTree = this.getTreeData(res.data.data.treeNodeList)
            },
            // 递归判断列表，把最后的children设为undefined
            getTreeData(data) {
                for (var i = 0; i < data.length; i++) {
                    if (data[i].children.length < 1) {
                        // children若为空数组，则将children设为undefined
                        data[i].children = undefined
                    } else {
                        // children若不为空数组，则继续 递归调用 本方法
                        this.getTreeData(data[i].children)
                    }
                }
                return data
            },
            casChange1(data, add) {
                this.$nextTick(() => {
                    let node = this.$refs['cascaderEdit'].getCheckedNodes()

                    if(this.deptId ==''){
                        this.searchForm.company = ''
                        this.searchForm.unit_id = ''
                    }
                    let name = node[0].data.deptOrCompany

                    if (name == '部门') {

                        this.searchForm.company = node[0].data.companyId
                        this.searchForm.unit_id = data[data.length - 1]
                    } else {
                        this.deptId = ''
                        return this.$message.warning('只能选择部门')
                    }
                })
            },

            // tab页点击事件
            handleClick(val) {
                if (val == 'first') {
                    this.queryMechanics()
                } else if (val == 'second') {
                    this.queryArtificial()
                }
            },
            // 每页显示的条数
            handleSizeChange(val) {
                // console.log(val)
                this.queryall.pagesize = val
                this.queryMechanics()
            },
            // 当前页
            handleCurrentChange(val) {
                // console.log(val)
                this.queryall.startpage = val
                this.queryMechanics()
            },

            // 每页显示的条数
            handleSizeShiftChange(val) {
                // console.log(val)
                this.queryallShift.pagesize = val
                this.queryArtificial()
            },
            // 当前页
            handleCurrentShiftChange(val) {
                // console.log(val)
                this.queryallShift.startpage = val
                this.queryArtificial()
            },


            //新增人工出勤-保存
            //保存
            async saveShift() {

                // insertShiftData
                this.$refs['insertShiftData'].validate(async valid => {
                    if (valid) {
                        const res = await this.$http.post(
                            `/${this.$ServiceName}/api/external/machineManagement/insertShift`,
                            this.shiftData
                        )
                        if (res.status == 200) {
                            if (res.data.success) {
                                if (this.editleixModShift) {
                                    this.editleixModShift = false
                                }
                                this.$refs['insertShiftData'].resetFields()
                                this.queryArtificial()
                                return this.$message.success(res.data.msg)
                            } else {
                                return this.$message.error(res.data.msg)
                            }
                        } else {
                            this.$message.error('获取数据失败！')
                        }
                    } else {
                        return
                    }
                })
            },

            //保存
            async editTypeList() {
                // editTypeData
                this.$refs['editTypeData'].validate(async valid => {
                    if (valid) {
                        const res = await this.$http.put(
                            `/${this.$ServiceName}/api/external/machineManagement/update`,
                            this.nowData
                        )
                        if (res.status == 200) {
                            if (res.data.success) {
                                if (this.editleixMod) {
                                    this.editleixMod = false
                                }
                                this.$refs['editTypeData'].resetFields()
                                this.searchData()
                                return this.$message.success(res.data.msg)
                            } else {
                                return this.$message.warning(res.data.msg)
                            }
                        } else {
                            this.$message.error('获取数据失败！')
                        }
                    } else {
                        return
                    }
                })
            },
            // 查询主列表
            searchData() {
                if (this.activeName == 'first') {
                    this.queryMechanics()
                } else if (this.activeName == 'second') {
                    this.queryArtificial()
                }
            },

            //查询人工
            async queryArtificial() {
                if (!this.searchRgForm.workDate) {
                    this.searchRgForm.workDate = ''
                }
                this.loading = true

                const res = await this.$http.get(
                    `/${this.$ServiceName}/api/external/machineManagement/queryallShift?startpage=${this.queryallShift.startpage}&pagesize=${this.queryallShift.pagesize}&workDate=${this.searchRgForm.workDate}&workTime=${this.searchRgForm.workTime}`
                )

                if (res.status == 200) {

                    this.loading = false
                    if (res.data.success) {
                        this.rGtableData = res.data.data.pages
                        this.rGtableData.map(item => {
                            item.workDate = this.formatTime(item.workDate)
                        })
                        // 分页
                        this.queryallShift.startpage = res.data.data.pageNum // 当前页
                        this.queryallShift.totalNum = parseInt(res.data.data.totalNum) // 总数量
                        this.queryallShift.pagesize = res.data.data.pageSize //
                    }
                } else {
                    this.$message.error('获取数据失败！')
                }
            },

            handleClose(done) {
                    this.$confirm('数据未保存，是否关闭？')
                        .then(_ => {
                            done()
                            this.$nextTick(() => {
                                if (this.$refs['editTypeData'] !== undefined) {
                                    this.$refs['editTypeData'].resetFields()
                                }

                            })
                        })
                        .catch(_ => { })

            },

            // 查询机械
            async queryMechanics() {
                this.loading = true
                if (this.pagesize === 0) {
                    this.startpage = 1
                }

                const res = await this.$http.get(
                    `/${this.$ServiceName}/api/external/machineManagement/queryall?startpage=${this.queryall.startpage}&pagesize=${this.queryall.pagesize}&unit_id=${this.searchForm.unit_id}&status=${this.searchForm.status}&equipment_no=${this.searchForm.equipment_no}`
                )

                if (res.status == 200) {

                    this.loading = false
                    if (res.data.success) {
                        this.tableData = res.data.data.pages
                        // 分页
                        this.queryall.startpage = res.data.data.pageNum // 当前页
                        this.queryall.totalNum = parseInt(res.data.data.totalNum) // 总数量
                        this.queryall.pagesize = res.data.data.pageSize //
                    }
                } else {
                    this.$message.error('获取数据失败！')
                }
            },


        }
    }
</script>
<style lang="less" scoped>
    @import "../../../assets/searchfrom.less";
</style>
<style lang="less" scoped>
    /deep/ .el-table {
        max-height: none !important;
    }

    .selectBox {
        justify-content: space-between;
        display: flex;

        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-left: none;

        height: 50px;
        padding-top: 11px;
        padding-left: 14px;
        padding-right: 20px;
    }

    /deep/ .el-drawer__header {
        margin-bottom: 0;
        padding: 16px;
        border-bottom: 1px solid gainsboro;
    }

    /deep/ .el-button--primary {
        background-color: #338ce8;
        border-color: #338ce8;
    }

    .page {
        background: #ffffff;
        border-radius: 4px 4px 0 0;
        padding: 0 1rem;
    }

    .box {
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-radius: 4px 4px 0 0;
        border-top: none;
    }

    .title {
        background: #f5f7fa;
        height: 40px;
        line-height: 40px;

        p {
            font-family: MicrosoftYaHei;
            font-size: 16px;
            color: #303133;
            letter-spacing: 0;
            line-height: 16px;
            padding-left: 14px;
            line-height: 40px;
        }
    }

    /deep/ .el-table .cell {
        white-space: nowrap;
    }

    /deep/ .el-form-item--mini .el-form-item__label {
        line-height: 0;
    }

    /deep/ .el-pagination {
        text-align: right;
        padding: 10px 5px;
    }

    /deep/ .el-table th > .cell {
        font-family: PingFangSC-Semibold;
        font-size: 14px;
        color: #606266;
    }

    /deep/ .el-table .el-button:focus,
    .el-table .el-button:hover {
        background-color: #fff;
        border: 1px solid #e1e4eb;
    }

    /deep/ .el-table .el-button--mini {
        color: #1684f6;
        border-color: transparent;
        background: transparent;
    }

    /deep/ .el-table th {
        border-left: 1px solid #ebeef5;
    }

    /deep/ .el-table th:nth-child(1) {
        border-left: none;
    }

    /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: #f5f7fa;
    }

    .right /deep/ .el-button--mini {
        padding: 7px 6px;
    }

    /deep/ .el-pagination.is-background .btn-next,
    /deep/ .el-pagination.is-background .btn-prev,
    /deep/ .el-pagination.is-background .el-pager li {
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-radius: 3px;
        border-radius: 3px;
    }

    /deep/ .el-button + .el-button {
        margin-left: 3px;
    }

    .asa {
        display: inline;

        /deep/ .el-button--mini,
        .el-button--mini.is-round {
            padding: 7px 6px;
        }
    }

    .selectBox1 {
        justify-content: space-between;
        display: flex;
        flex-direction: row-reverse;
        background: #ffffff;
        border: 1px solid #e1e4eb;
        border-left: none;
        line-height: 28px;
        height: 37px;
        padding-top: 11px;
        padding-left: 14px;
        padding-right: 20px;
    }

    .excelBox /deep/ .el-drawer__open .el-drawer.rtl {
        width: 50% !important;
    }

    /deep/ .el-form-item--mini.el-form-item {
        line-height: 28px;
    }

    /deep/ .demo-drawer__footer {
        text-align: right;
        padding-right: 1rem;
        border-top: 1px solid #c8cfde;
        background-color: #f5f7fa;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 50px;
    }
</style>
